<template>
  <div class="columns">
    <div class="column is-full">
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span><em class="fa fa fa-book"> 可上架商品 </em></span>
        </div>
        <div>
          此处选择上架店铺：
          <el-select v-model="storeId" placeholder="请选择店铺id" @change="init">
            <el-option
                v-for="item in storeList"
                :key="item"
                :label="item"
                :value="item">
            </el-option>
          </el-select>
          <div>
            <el-table
                :data="goodsList"
                :stripe="true"
                style="width: 100%">
              <el-table-column
                  prop="goodsId"
                  label="商品id"
                  width="220">
              </el-table-column>
              <el-table-column
                  prop="title"
                  label="商品名称"
                  width="220">
              </el-table-column>
              <el-table-column
                  prop="price"
                  label="价格"
                  width="220">
              </el-table-column>
              <el-table-column label="上架">
                <template slot-scope="scope">
                  <el-button
                      size="mini"
                      type="success" plain
                      @click="goodsOn(scope.$index, scope.row)">上架
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <br/>
            <!--分页-->
            <pagination
                v-show="inPage.total > 0"
                :total="inPage.total"
                :page.sync="inPage.current"
                :limit.sync="inPage.size"
                @pagination="init"
            />
          </div>

        </div>
      </el-card>
    </div>
  </div>
</template>
<script>

import {getGoodsPage, goodsOnStore} from "@/api/goods";
import Pagination from "@/components/Pagination";
import dayjs from "dayjs";
import {mapGetters} from "vuex";

export default {
  name: "GoodsList",
  components: {Pagination},
  computed: {
    ...mapGetters(["token", "user"]),
  },
  data() {

    return {
      inPage: {
        current: 1,
        size: 10,
        total: 0
      },
      storeId: 1001,
      storeList: [1001, 1002, 1003],
      goodsList: [],
    }
  },

  mounted() {
    this.init();
  },


  methods: {

    init() {
      getGoodsPage(this.inPage.current, this.inPage.size).then((response) => {
        const {data} = response;
        this.inPage.current = data.current;
        this.inPage.total = data.total;
        this.inPage.size = data.size;
        this.goodsList = data.records;
      });
    },

    formatDate(row, column, cellValue, index) {
      return dayjs(cellValue).format("YYYY/MM/DD hh:mm");
    },

    goodsOn(index, row) {
      this.$prompt('上架商品至'+this.storeId+'，请输入上架数量', '上架', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(({value}) => {
        const goodsId = (index, row).goodsId;
        console.log(goodsId);
        goodsOnStore(goodsId, this.storeId, value).then(() => {
          this.$message({
            type: 'success',
            message: '上架成功'
          });
          this.init();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    }
  },
};
</script>

<style scoped>

</style>
